<template>
  <div>
    <div>文本内容：{{ text }}</div>
    <div>
      <input type="text" v-model="text">
    </div>

    <div>英文内容：{{ msg }}</div>
    <div>
      <input type="text" v-model="msg">
    </div>
  </div>
</template>

<script lang="ts" setup>
import { customRef, ref } from 'vue'
import useMsgRef from './useMsgRef';

// track(跟踪)、trigger(触发)
let text = customRef((track, trigger) => {
  let initValue = '你好'
  let timer:number
  return {
    // 自定义ref被读取时调用
    get() {
      track()  // 告诉Vue这个数据很重要，你要对这个自定义Ref进行持续关注，一旦msg变化就去更新
      return initValue
    },
    // 自定义ref被修改时调用
    set(value) {
      console.log('value', value)
      clearTimeout(timer)
      timer = setTimeout(() => {
        initValue = value
        trigger()  // 通知Vue，这个自定义Ref发生修改了
      }, 1000);
    }
  }
})

let { msg } = useMsgRef('hello', 500)
</script>

<style lang="scss" scoped>

</style>